<template>
	<uni-popup ref="popup" background-color="#fff" :borderRadius="type == 'bottom' ? '10px 10px 0 0' : 'none'"
		mask-background-color="rgba(0,0,0,0.6)">
		<view class="popup">
			<view class="close-popup">
				<text>绑定手机</text>
				<u-icon @click="close" size="14" bold name="close" style="position: absolute; right: 0; padding: 5px;"></u-icon>
			</view>
			<u--form class="change-phone-num-form" labelWidth="219rpx" :labelStyle="formLabelStyle" :model="phoneForm"
				errorType="toast" ref="phoneFormRef" :rules="rules" style="margin-bottom: 20px;">
				<u-form-item label="手机号" prop="phone" borderBottom>
					<u--input v-model="phoneForm.phone" type="number" placeholderClass="input-placeholder"
						placeholder="请输入手机号码" :customStyle="iptCustomStyle" />
				</u-form-item>
				<u-form-item label="验证码" prop="captcha_code">
					<u--input v-model="phoneForm.captcha_code" type="number" placeholderClass="input-placeholder"
						placeholder="请输入验证码" :customStyle="iptCustomStyle" :maxlength="6" />
					<u--text slot="right" :text="textTip" :color="textColor" @click="getCode" />
					<u-code seconds="60" keepRunning ref="uCode" @start="codeStart" @change="codeChange"
						@end="codeEnd" />
				</u-form-item>
			</u--form>
			<view v-if="price">
				<view class="text-sm" style="color: #8E512F;">
					{{data.discount_fee * 1 ? `绑定成功立减${data.discount_fee}元` : `绑定手机号码`}}
					
				</view>
				<u-button class="bj-color" @click="confirm" throttleTime="3000">绑定并支付 ￥{{price}}</u-button>
			</view>
			<view v-else>
				<u-button class="bj-color" @click="confirm" throttleTime="3000">绑定</u-button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import {
		mapState,
	} from "vuex";
	import {
		phoneCaptcha,
		phoneBind
	} from '@/service/index'

	export default {
		props: {
			price: {
				type: Number,
				default: 0
			},
			data: {
				type: Object,
				default: {}
			},
			type: {
				type: String,
				default: 'bottom'
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				phoneForm: {
					phone: '',
					captcha_code: '',
					wechat_id: ''
				},
				codeDisabled: false,
				textTip: '获取验证码',
				textColor: '#8E512F',
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['change', 'blur'],
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '请输入正确的手机号码',
						trigger: ['change'],
					}],
					captcha_code: [{
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['change']
					}]
				},
				formLabelStyle: {
					width: '100rpx',
					fontSize: '30rpx',
					color: '#2D3338'
				},
				iptCustomStyle: {
					border: 'none',
					background: '#FFFFFF',
					fontSize: '32rpx',
					color: '#57616B'
				}
			}
		},
		methods: {
			// 开启弹窗
			open() {
				this.$refs.popup.open(this.type)
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 绑定并支付
			async confirm() {
				try {
					await this.$refs.phoneFormRef.validate()
					this.phoneForm.wechat_id = this.userInfo.wechat_info.wechat_id
					let res = await phoneBind(this.phoneForm)
					if (res.code === 200) {
						setTimeout(() => {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						}, 500)
						// 更新用户信息
						try {
							await this.$store.dispatch('login/userinfoAction');
							// 调起支付
							this.$emit('confirm', {})
						} catch (error) {}
					}
				} catch (e) {}
			},
			
			// 获取验证码
			async getCode() {
				try {
					if (this.codeDisabled) return this.$showToast('倒计时结束后再点击获取')
					let errTips = []
					await this.$refs.phoneFormRef.validateField('phone',  async(errorsRes) => {
						errTips = errorsRes.map(item => item.message)
						if (errTips.length) {
							return this.$showToast(errTips[0])
						}
						let res = await phoneCaptcha({
							phone: this.phoneForm.phone
						})
						console.log(res)
						this.$showToast('验证码已发送')
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} catch (e) {}
			},
			codeStart() {
				this.textColor = '#57616B'
				this.codeDisabled = true
			},
			// 验证码倒计时期间，每秒触发一次
			codeChange(text) {
				this.textTip = text
			},
			codeEnd() {
				this.textColor = '#8E512F'
				this.codeDisabled = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup {
		padding: 0 16px;

		.close-popup {
			height: 56px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			font-size: 14px;
			color: #000000;
			line-height: 24px;

			&>image {
				position: absolute;
				left: 0;
			}
		}

		.bj-color {
			width: 100%;
			height: 48px;
			background: linear-gradient(270deg, #8E512F 0%, #8E512F 100%);
			font-size: 14px;
			color: #FFF0ED;
			line-height: 48px;
			text-align: center;
			border-radius: 800px;
			margin: 10px 0 6px;
		}
	}
</style>